<template>
    <el-select class="g-width100"
               ref="elSelect"
               filterable
               :disabled="disabled"
               :readonly="readonly"
               v-model="localValue"
               :placeholder="placeholder"
               v-on:focus="handleFocus($event)"
               v-on:blur="handleBlur($event)"
               v-on:change="emitChange"
               v-on:input="emitInput"
    >
        <el-option :label="emptyLabel" :value="emptyValue" v-if="showEmpty"></el-option>
        <el-option
                label="是"
                :value="1"
        ></el-option>
        <el-option
                label="否"
                :value="0"
        ></el-option>
    </el-select>
</template>

<script>
    export default {
        name: 'SelectYesNo',
        props: {
            value: {
                required: true
            },
            placeholder:{
                type: String,
                default: '请选择'
            },
            // 是否显示请选择
            showEmpty: {
                type: Boolean,
                default: true
            },
            emptyLabel:{
                type: String,
                default: '请选择'
            },
            emptyValue:{
                default: null
            },
            // 是否禁用
            disabled:{
                type:Boolean,
                default:false
            },
            readonly:{
                type:Boolean,
                default:false
            }
        },
        data () {
            return {
                localValue: this.value
            }
        },
        mounted () {
        },
        methods: {
            handleFocus (event) {
                this.$emit('focus', event)
            },
            handleBlur (event) {
                this.$emit('blur', event)
            },
            emitChange (val) {
                this.$emit('change', val)
            },
            emitInput (val) {
                this.$emit('input', val)
            }
        },
        watch: {
            value(val){
                this.localValue = val
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
